<template>
	<view class="container">
		<!-- 自定义标题栏 -->
		<navigation-bar title="搜索"></navigation-bar>
		
		<view class="cont-box">
			<view class="dis-flex search-input-box">
				<view class="search-input">
					<view class="dis-flex flex-y-center search-box">
							<text class="iconfont2 icon-searchfor col-9"></text>
							<input v-model="searchValue" @blur="search(searchValue)" class="input" focus="true" placeholder="请输入您搜索的内容" placeholderStyle="color:#aba9a9;font-size:24rpx;" type="text"/>
					</view>
				</view>
			</view>
			
			<view class="search-cont-box" v-if="recentWant.length">
				<view class="title-box col-3">
					<text>最近搜索</text>
					<text @tap="clearSearch" class="iconfont icon-lajixiang"></text>
				</view>
				<view class="sale-button-box">
					<view class="seconds-kill-li" v-for="(recent, idx) in recentWant" :key="idx">
						<view @tap="goSearch(recent)" class="recent-button col-6">{{recent}}</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
let App = getApp().globalData;
import {mapState,mapMutations} from 'vuex';
import navigationBar from '@/components/navigationBar/index';

export default {
  components: {
    'navigation-bar': navigationBar
  },
  data() {
    return {
      recentWant: [],
      searchValue: '',
      tabsOn: '',//搜索的类型
    };
  },

  //生命周期函数--监听页面加载
  onLoad: function (options) {
    this.tabsOn = options.tabsOn;
  },
  //生命周期函数--监听页面显示
  onShow: function () {
    // 获取历史搜索
    this.getRecentSearch();
  },
  methods: {
			//对全局方法进行监控
			...mapMutations(['changeData']),
    //获取历史搜索
    getRecentSearch: function () {
      this.recentWant = wx.getStorageSync('recentWant');
    },

    //搜索提交
    search (val) {
      if (val!='') {
        // 记录最近搜索
        let recentWant = wx.getStorageSync('recentWant') || [];
        let index = recentWant.indexOf(val);
        index > -1 && recentWant.splice(index, 1);
        recentWant.unshift(val);
        wx.setStorageSync('recentWant', recentWant); // 跳转到商品列表页
				
				this.changeData({k:'optimizateSearch',v:val})
				wx.switchTab({
					url: `/pages/index/index`,
				});
     //    wx.reLaunch({
					// // url: `/pages/optimization/index?search=${val}&tabsOn=${this.tabsOn}`,
					// url: `/pages/optimization/index?search=${val}&tabsOn=${this.tabsOn}`,
     //    });
      }
    },
    //跳转到最近搜索
    goSearch(val) {
			this.changeData({k:'optimizateSearch',v:val})
			
			wx.switchTab({
				url: `/pages/index/index`,
			});
    },
    //清空最近搜索记录
    clearSearch: function () {
      wx.removeStorageSync('recentWant');
      this.getRecentSearch();
    },

  }
};
</script>
<style>
	@import "index.css";
</style>